import React, { useEffect, useContext, useState } from 'react'
import { ThemeWrapper } from './styledAll'
import bg from '../../../../assets/images/bg.png'
import httpContext from '@/context/httpContext'
export default function Theme() {
    const { get } = useContext(httpContext)
    const [theme, setTheme] = useState([])
    useEffect(
        async () => {
            let res = await get({
                url: 'theme.json'
            })
            // console.log(res.data.data.list[0].seriesList);
            setTheme(res.data.data.list[0].seriesList)
        }, []
    )


    let arr1 = theme.slice(0, 11)
    let a1 = arr1.slice(0, 1)
    let b1=arr1.slice(1,11)

    let arr2 = theme.slice(11, 21)
    let a2 = arr2.slice(0, 1)
    let b2=arr2.slice(1,11)

    let arr3 = theme.slice(21, 31)
    let a3 = arr3.slice(0, 1)
    let b3=arr3.slice(1,11)

    let arr4 = theme.slice(31, 41)
    let a4 = arr4.slice(0, 1)
    let b4=arr4.slice(1,11)

    // let arr5=theme.slice(40,50)
    // let arr6=theme.slice(50,60)
    // let arr7=theme.slice(60,70)
    // let arr8=theme.slice(70,80)
    // console.log(arr);
   
    const a = [a1, a2, a3, a4]
    // const arr=[obj]
    const aa=[
        {
            'top':a1,
            'list':b1
        }, {
            'top':a2,
            'list':b2
        }, {
            'top':a3,
            'list':b3
        }, {
            'top':a4,
            'list':b4
        }
    ]

    return (
        <ThemeWrapper>
            {
                aa.map((item1,index) => {
                    return (
                        <div key={index} className='theme'>
                            <div>
                                {
                                    item1.top.map((item,index)=>{
                                        return(
                                        <div className='first' key={index + item}>
                                            <div>
                                                <h1>{item.name}</h1>
                                                <p>{item.subName}</p>
                                            </div>
                                            <div>
                                                <img src={item.coverUrl} alt="" />
                                            </div>
                                        </div>
                                        )
                                    })
                                }
                              
                            </div>
                           
                            <ul>
                                {
                                    item1.list.map((item,index)=>{
                                        return(
                                            <li key={index}>
                                                <div className='li_img'>
                                                <img src={item.coverUrl} alt="" />
                                                </div>
                                                <div className='dec'>
                                                    <h1>{item.name}</h1>
                                                    <p>{item.subName}</p>
                                                </div>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                                {/* arr.map((item, index) => {
                                    return (
                                    item.map((item,index)=>{
                                        return(
                                            <li key={index}>
                                            <div className='li_img'>
                                                <img src={item.coverUrl} alt="" />
                                            </div>
                                            <div className='dec'>
                                                <h1>{item.name}</h1>
                                                <p>{item.subName}</p>
                                            </div>
                                        </li>
                                        )
                                    })
                                    )
                                }) */}
                            
                            </div>
                    )
                    // return (
                    //     item1.map((item2, index) => {
                    //         return (
                    //             <ul key={index}>
                    //                 <li className='first' key={index + item2}>
                    //                     <div>
                    //                         <h1>{item2.name}</h1>
                    //                         <p>{item2.subName}</p>
                    //                     </div>
                    //                     <div>
                    //                         <img src={item2.coverUrl} alt="" />
                    //                     </div>
                    //                 </li>
                    //                 {
                    //                     arr.map((item, index) => {
                    //                         return (
                    //                            item.map((item,index)=>{
                    //                                return(
                    //                                 <li key={index}>
                    //                                 <div className='li_img'>
                    //                                     <img src={item.coverUrl} alt="" />
                    //                                 </div>
                    //                                 <div className='dec'>
                    //                                     <h1>{item.name}</h1>
                    //                                     <p>{item.subName}</p>
                    //                                 </div>
                    //                             </li>
                    //                                )
                    //                            })
                    //                         )
                    //                     })
                    //                 }
                    //             </ul>
                    //         )
                    //     })

                    // )
                })
            }
        </ThemeWrapper>
    )
}
